<template>
  <div class="box">
    <div class="card-box">
      <el-card class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <p class="tit">社会关注度走势</p>
        </div>
        <div class="query-list">
          <div class="date-box">
            <span>时间：</span>
            <p>
              <el-date-picker
                v-model="timeStart"
                type="date"
                placeholder="开始时间"
                @change="switchTime"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
              <span class="date-select-right">-</span>
              <el-date-picker
                v-model="timeEnd"
                type="date"
                placeholder="结束时间"
                @change="switchTime"
                value-format="yyyy-MM-dd"
                clearable
              ></el-date-picker>
            </p>
          </div>
          <div class="vbtn-toggle">
            <el-button type="primary" class="elbtn-left" :class="{'elbtn-active':linesChartActive===0}" @click="handleToggle(0)">
              <i class="iconfont icon-zhexiantu"></i>
            </el-button>
            <el-button type="primary" class="elbtn-right" :class="{'elbtn-active':linesChartActive===1}" @click="handleToggle(1)">
              <i class="iconfont icon-situation"></i>
            </el-button>
          </div>
        </div>
        <lines :style="linesStyle" ref="lines"></lines>
        <div v-if="infoMoveData.length<=0" class="no-data">
          <loading1 :emptyText="emptyText1"/>
        </div>
      </el-card>
    </div>
    <div class="card-box">
      <el-card class="elcard" style="flex:.5;align-self:normal;margin-right:5px">
        <div slot="header" class="hd clearfix">
          <p class="tit">影响力方向</p>
        </div>
        <pie ref="pie1" id="pie1"></pie>
      </el-card>
      <el-card class="elcard" style="flex:.5;align-self:normal;margin-left:5px">
        <div slot="header" class="hd clearfix">
          <p class="tit">社会舆论倾向</p>
        </div>
        <pie ref="pie2" id="pie2"></pie>
      </el-card>
    </div>
    <!-- <div class="card-box">
      <el-card class="elcard" style="flex:.5;align-self:normal;margin-right:10px">
        <div slot="header" class="hd clearfix">
          <span class="tit">影响力方向</span>
        </div>
        <div style="background: #fff">
          <pie :tagData="tagData" id="tagData"></pie>
        </div>
      </el-card>
      <el-card class="elcard" style="flex:.5;align-self:normal;margin-left:10px">
        <div slot="header" class="hd clearfix">
          <span class="tit">社会舆论倾向</span>
          <el-popover
            placement="right"
            width="300"
            trigger="hover">
            <p>采用文本情感分析算法，自动分析识别出篇章中表达的观点或态度情感倾向，如正面、中性、负面</p>
            <i slot="reference" class="explain"></i>
          </el-popover>
        </div>
        <div style="background: #fff">
          <pie :sentimentData="sentimentData" id="sentimentData"></pie>
        </div>
      </el-card>
    </div> -->
    <div class="card-box">
      <el-card class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <p class="tit">新闻舆情</p>
          <!-- <i class="result-num">当前为您找到相关结果约&nbsp;{{ totalVal }}个</i> -->
        </div>
        <ul class="result-list" v-loading="loading">
          <li v-for="(item, index) in resultList" :key="index">
            <a
              class="titles"
              :title="item.title"
              :href="item.url"
              target="_blank"
              >{{ item.title }}</a
            >
            <p class="abst" v-html="item.content"></p>
            <div class="footer">
              <p>
                {{ item.source }}&nbsp;&nbsp;{{ item.time }}
              </p>
            </div>
          </li>
        </ul>
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="ips"
            @current-change="getCurrentPage"
            :current-page.sync="ipi"
            class="el-pagination"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import {thousands} from '@/utils/utils'
import lines from "./child/line";
import pie from "./child/pie";
export default {
  components: {
    lines,
    pie
  },
  data() {
    return {
      info: {},
      timeStart: "", // 时间选择
      timeEnd: "",
      // 社会关注度走势
      infoMoveData: [],
      linesChartActive: 0,
      emptyText1: 'loading',
      // 影响力方向
      tagData: [],
      // 社会舆论倾向
      sentimentData: [],
      // 搜索结果列表
      resultList: [],
      loading: false,
      // 分页
      total: 0,
      totalVal: '',
      ipi: 1,
      ips: 10,
    };
  },
  computed: {
    // 社会关注度走势图表样式
    linesStyle() {
      if (this.infoMoveData.length > 0) {
        return {
          position: 'relative'
        }
      } else {
        return {
          position: 'absolute',
          top: '-9999px',
          left: '-9999px',
          'z-index': -1
        }
      }
    }
  },
  methods: {
    init() {
      this.info = {
        name: this.$route.query.name,
        key: this.$route.query.key,
        companyName: this.$route.query.companyName
      }
      this.search()
      this.getNews()
    },
    search() {
      this.emptyText1 = 'loading'
      this.$post(this.$Url.team.expertSocialAttentionTrend, {
        name: this.info.name,
        companyName: this.info.companyName,
        start: this.timeStart,
        end: this.timeEnd,
      }).then((res) => {
        let data = res.data
        let agg = data && data.agg || {}
        // 社会关注度走势
        this.infoMoveData = agg && agg['time'] || []
        if (this.infoMoveData.length <= 0) {
          this.emptyText1 = '暂无数据'
        }
        this.$refs.lines.init({data: this.infoMoveData, type: this.linesChartActive})

        // 影响力方向
        this.tagData = agg && agg['tag'] || []
        this.$refs.pie1.init({data: this.tagData, name: '影响力方向'})

        // 社会舆论倾向
        this.sentimentData = agg && agg['sentiment'] || []
        this.$refs.pie2.init({data: this.sentimentData, name: '社会舆论倾向'})
        
      }).catch((err) => {});
    },
    // 新闻舆情
    getNews() {
      this.loading = true;
      this.$post(this.$Url.team.expertNewPageQuery, {
        ipi: this.ipi,
        ips: this.ips,
        name: this.info.name,
        companyName: this.info.companyName
      }).then(res => {
        this.loading = false
        let data = res.data
        let result = data && data.result
        
        this.total = data && data.total || 0
        this.totalVal = thousands(this.total)
        this.resultList = result
      }).catch(err => {})
    },
    // 社会关注度走势切换
    handleToggle(index) {
      this.linesChartActive = index
      this.$refs.lines.init({data: this.infoMoveData, type: this.linesChartActive})
    },
    // 切换时间区间
    switchTime() {
      this.search()
    },
    getCurrentPage(val) {
      this.ipi = val
      this.getNews()
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.card-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.elcard {
  position: relative;
  flex: .5;
  padding: 0 !important;
  text-align: left !important;
  ::v-deep {
    .el-card__header {
      position: relative;
      &:before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 5px;
        height: 30px;
        margin-top: -15px;
        content: '';
        background-color: $color101;
      }
    }
    .el-card__body {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  .tit {
    font-size: 14px;
    font-weight: bold;
    i {
      color: #504da6;
    }
  }
  .achievements {
    position: relative;
    li {
      display: block;
      border-bottom: 1px solid #EBEEF5;
      margin-bottom: 10px;
    }
  }
}
.el-row {
  background: #fff;
  margin-bottom: 20px;
}
.title {
  font-weight: bold;
  padding-left: 20px;
  text-align: left;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
  span {
    display: inline-block;
    vertical-align: middle;
  }
  .explain {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    vertical-align: middle;
    background: url(../../../../../assets/img/wenhao.png) no-repeat center center;
    background-size: 100%;
    cursor: pointer;
  }
}
.query-list {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 28px;
  box-sizing: border-box;
  margin: 20px 20px 0;
  text-align: left;
  .date-box {
    position: relative;
    > span {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 60px;
      line-height: 36px;
      text-align: left;
      font-weight: 600;
      font-size: 12px;
      color: #241c75;
    }
    p {
      padding-left: 60px;
    }
    .date-select-right {
      margin: 0 4px;
    }
    .el-date-editor {
      ::v-deep {
        .el-input__icon {
          color: inherit;
        }
      }
    }
  }
  .vbtn-toggle{
    margin-right:20px;
    .el-button {
      width: 48px;
      height: 40px;
      border: 0;
      color: #b8b7ee;
      background-color: #e9e9fc;
      padding: 6px;
      &:hover {
        background-color: $mainColor;
        border: 1px solid $mainColor;
        color: #fff;
      }
    }
    .elbtn-left {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .elbtn-right {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      margin-left: 2px !important;
    }
    .elbtn-active {
      color: #fff !important;
      background-color: $mainColor !important;
      &:hover, &:active {
        color: #fff;
        background-color: $mainColor !important;
      }
    }
  }
}

.result-list {
  position: relative;
  width: 100%;
  padding: 0 24px;
  text-align: left;
  list-style: none;
  padding-bottom: 10px;
  li {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #d4d3f3;
    .titles {
      display: block;
      padding: 14px 0;
      text-decoration: none;
      font-weight: 600;
      font-size: 14px !important;
      color: #4f515b;
    }
    .abst {
      line-height: 26px;
      font-size: 14px;
      color: #86899e;
    }
    .footer {
      position: relative;
      p:nth-child(1) {
        font-size: 14px;
        color: #aaaeca;
        padding-top: 10px;
        padding-bottom: 20px;
      }
    }
  }
}
.result-num {
  position: absolute;
  top: 20px;
  right: 20px;
  line-height: 30px;
  font-style: normal;
  font-size: 12px;
  color: #86899e;
}
.pagination {
  padding-bottom: 20px;
}
.no-data {
  height: 150px;
  line-height: 150px;
}
</style>